How To Center Align A Website Using HTML And CSS?
October 14th, 2016 | by Ravi Chahar || 7 Comments |
There are many people who want to center align a website because of the full header and footer. The layout of every website is different.
If you take an action to design a full-width header and footer but keep the content of the website in the center then you have to use the HTML and CSS.
Though it is not necessary to have a full-width header or footer. You can center align a website with the full content including header and footer.
Understand The Concept of HTML and Center Align a Website.
First of all, you must have the basic knowledge of the HTML including the starting and ending tags. If you design a WordPress theme or any template then follow the guide.
Step 1:- Put an HTML division tag around the content of your website. If you want to leave the header and footer then just add the content in the division tag.
For example.
<header>
//code for the header
</header>
<div class=”wrapper”>
//code to display the content
</div>
<footer>
//code to show the footer
</footer>
In the above code, the <div> tag is added with a class. You can give any class you want. It’s just the practice of coding and the habits.
If you want to center the whole site then add everything between the <div> tag.
For example.
<div class=”wrapper”>
//codes for the content of the full website
</div>
Step 2:- An important thing to center align a website is the use of CSS language. You have to target the class given in the division tag.
div.wrapper {
width: 920px;
margin: 0 auto;
}
This code would do the work for you. The width of the website would vary because every website has its own design and layout width.
NOTE:- The main thing is to set the margin. The “auto” value would keep the margin equal from right and left sides.
Did You Get A Solution To Center Align A Website?
As I have shown you by taking an example, you don’t need to do much. Just place the content of the website which you want to center align in the division tag and target its class with the auto margin.
If you’re a developer then it won’t be a problem for you to configure it. The above method can be applied to any web designing project.
Related Posts
7 comments
Leave a Reply
There so many great web design and I myself is definitely HTML blind, totally.
Hey Louis,
HTML isn’t a tough language. Just a few tags and elements and you’re on.
Thanks for stopping by.
Have a nice day.
~Ravi
Hello Ravi,
Great information shared here. Indeed I was wondering for this type of tips and today find code for center align.Thank you for sharing valuable codes.
Hi Ravi, I accidently came to your blog and found that there are so many articles to read and after reading some of them I must say your blog is one of the best blogs that I have ever read. Looking for learning many things from you. Thanks for sharing ?
Hey Pratap,
I have experienced that people get frustrated when they try to center the layout their website and don’t find any solution for that. I am just trying to help the needy people.
Thanks for taking the time to read.
Have a great weekend.
~Ravi
I have almost read all the post in your blog, and I can tell you.
Your the coding freak and like to make your code and this is interesting Being developer this is very proud when people like your code…
BTW Nicely maintained blog You have…
Hey Prince,
Glad that you found it helpful. I just try to provide the best I can. We all are here to help each other.
Thanks for stopping by.
Have a good weekend.
~Ravi